<template>
	<view class="publish">
		<navBar title="编辑Blog"></navBar>
		<view class="form-box">
			<u--form labelWidth="80" labelPosition="top" :model="form" ref="form" :rules="rules"
				:labelStyle="{paddingLeft: '5px'}">
				<!-- 文章标题 -->
				<u-form-item prop="title" label="文章标题" borderBottom required>
					<u--input v-model="form.title" border="none" placeholder="请输入文章标题"
						placeholderStyle="font-size: 17px; opacity: 0.5" clearable></u--input>
				</u-form-item>
				<!-- 文章封面 -->
				<u-form-item prop="cover" label="文章封面" borderBottom required>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" maxCount="1"
						:previewFullImage="true">
					</u-upload>
				</u-form-item>
				<!-- 文章分类 -->
				<u-form-item prop="classifyArr" label="文章分类" borderBottom required>
					<view>
						<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
						<input :value="classifyName" @click="show = true" placeholder="请选择分类" border="none"
							disabled></input>
					</view>
				</u-form-item>
				<!-- 文章内容 -->
				<u-form-item prop="content" label="文章内容" borderBottom required>
					<jin-edit class="editor" height="50vh" @editOk="publish" :header="{'x-token': userInfo.token}"
						uploadFileUrl="https://eggblog.bluej.cn/api/imgUpload"></jin-edit>
				</u-form-item>
			</u--form>
		</view>
		<view class="loginBox" v-show="showLogin">
			<login class="login"></login>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getClassify,
		createBlog
	} from '@/config/api.js'

	export default {
		data() {
			return {
				form: {
					title: '',
					content: '',
					cover: '',
					classifyArr: [],
					projectId: 165
				},
				rules: {
					title: {
						required: true,
						message: "请输入文章标题",
						trigger: ['change', 'blur']
					},
					content: {
						required: true,
						message: "请输入文章内容",
						trigger: ['change', 'blur']
					},
					cover: {
						required: true,
						message: "请上传文章封面",
						trigger: ['change', 'blur']
					},
					classifyName: {
						type: 'array',
						required: true,
						message: "请选择文章分类",
						trigger: ['change', 'blur']
					}
				},
				// 分类弹出层
				show: false,
				// 存放封面
				fileList: [],
				// 存放分类:[放[],不能直接赋值]
				columns: [],
				// 存放分类的ID
				classifyId: [],
				// 选择的分类名字
				classifyName: '',
				showLogin:false
			}
		},
		onLoad() {
			// 触发获取分类方法
			this.initClassify()
			// 登录模块弹出层
			if(!this.userInfo.id){
				this.showLogin=true
			}
		},
		methods: {
			deletePic() {
				// 删除（0项，一个）
				this.fileList.splice(0, 1)
			},
			afterRead(data) {
				// 读取后 图片文件路径
				console.log(data);

				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}
				this.fileList.push(imgStatus)

				// 通过此接口将本地资源上传到指定服务器
				uni.uploadFile({
					url: "https://eggblog.bluej.cn/api/imgUpload",
					filePath: data.file.url,
					name: "file",
					header: {
						"x-token": this.userInfo.token
					},
					success: res => {
						console.log(JSON.parse(res.data));
						const fileData = JSON.parse(res.data)

						this.$set(this.fileList, 0, {
							status: 'success',
							url: fileData.data[0]
						})

						// 保存在form表单内
						this.form.cover = fileData.data[0]
					}
				})
			},

			// 获取分类列表
			async initClassify() {
				const classify = await getClassify()
				this.classifyId = classify.data.rows
				this.classifyList = classify.data.rows.map(ele => ele.classifyName)
				this.columns.push(this.classifyList)
			},
			// 点击确认分类
			confirm(res) {
				this.form.classifyArr = [this.classifyId[res.indexs[0]].id]

				this.classifyName = res.value[0]
				this.show = false
			},
			// 点击关闭分类
			cancel() {
				this.show = false
			},
			async publish(data) {
				uni.showLoading({
					title: "发布中..."
				})
				// 保存在form表单内
				this.form.content = data.html
				console.log(this.form);

				try {
					// 校验表单
					await this.$refs.form.validate()

					// 请求创建博客接口
					const formList = await createBlog(this.form, this.userInfo.token)

					uni.showToast({
						title: "发布成功"
					})

					setTimeout(() => {
						this.form = {
							title: "",
							content: "",
							cover: "",
							classifyArr: null,
							projectId: 165
						}
						uni.switchTab({
							url: "/pages/index/index"
						})
					}, 2000)
				} catch (e) {
					uni.showToast({
							icon: "error",
							title: "发布失败"
						}),
						setTimeout(() => {
							this.$refs.form.clearValidate()
						}, 2000)
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss">
	.loginBox {
		z-index: 999;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 11.8652vw;
		left: 0;
		.login {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);

		}
	}

	.publish {
		padding: 20px;
	}

	.editor {
		width: 90vw;
		padding-bottom: 5vw;
	}

	::v-deep .tool {
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #fff;
	}

	::v-deep .tool-view {
		position: fixed;
		left: 0;
		bottom: 50px;
	}

	::v-deep .setting-layer {
		z-index: 999;
		position: fixed;
	}
</style>
